<template>
    <div class="tableView_box">
        <div class="item_box" v-for="i in range(0, 3)">
            <div v-for="j in range(0,3)">
                <!-- <CellView 
                :blockInd="i * 3 + j"
                :selNum="selNum"
                :dataArr="arrList[i * 3 + j]"
                :posX="posX"
                :posY="posY"
                :selBlock="selBlock"
                @setPos="setPos"
                class="cellClass "/> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import CellView from "./cellView.vue";
import {provide, onMounted, ref, inject, computed} from "vue";
import arr from '../contant/arr.js';

/*isQ: 0,//是否是题目 1 是 0 不是 这控制字体颜色
num: 1,// 空格里面的值
status: 0,// 状态 0 一般正常状态 1 填写数字与当前数值有冲突
x: 0,// 方格所在位置坐标
y: 0*/
const SUMCELLNUM = 9 * 9;// 总共多少方格 sumCellNum
let haveCorrectInputNum = ref(0);// 这是变化的
let questionCellNum = 0;//题目方格数
const arrList = ref([]);
const range = inject('range');
const selNum = ref(-1);// 选中数字
// 选中位置坐标
const posX = ref(0);
const posY = ref(0);
const selBlock = ref(-1);
// 按值存放所有方格的位置
const numToPosMap = [];
/*记录操作历史
historyAction 字段说明
{
  isDeleteOrInput: ,// 是  填入数字(1) 或 删除(0)
  pos: ,// 位置(x*3+y)
  blockInd: ,// 第几块
  num:// 如果是填入，填入的是几
}*/
const historyAction = [];
const needAnsPos = [];
const gameOver = computed(() => haveCorrectInputNum.value == SUMCELLNUM - questionCellNum)

onMounted(() => {
    //初始化map
    for (let i = 0; i < 10; i++) numToPosMap.push([]);
    // 把数组转换格式存放在数组里
    console.log('arr', arr);
    for (let x = 0; x < arr.length; x++) {
        let innerIt = arr[x];
        console.log('innerIt', innerIt);
        let tarr = [];
        for (let y = 0; y < innerIt.length; y++) {
            let it = innerIt[y];
            let tobj = {
                isQ: it ? 1 : 0,
                num: it ? it : '',
                status: 0,
                x: y / 3,
                y: y % 3,
                blockInd: x
            };
            tarr.push(tobj);
            let posObj = {
                x: y / 3,
                y: y % 3,
                blockInd: x
            };
            if (it) {
                numToPosMap[it].push(posObj);
            } else {// 需要填空位置
                needAnsPos.push(posObj);
            }
        }
        arrList.value.push(tarr);
        console.log('arrList', arrList.value);
    }
    console.log('arrList', arrList.value);

})
// 返回游戏状态
provide('getGameOver', () => gameOver.value);
// 设置选中x y坐标
const setPos = (pos, blockInd) => {
    posX.value = pos / 3;
    posY.value = pos % 3;
    selBlock.value = blockInd;
    console.log('setPos:pos' + pos);
}
// 输入数字是会调用这个方法
const inputNum = provide('inputNum', (blockInd, pos, val) => {
    // 判断 当前选中位置是否是需填答案的地方
    let it = dataList.value[blockInd][pos];
    if (!it.isQ) {
        // 填入数字
        it.num = val;
        // 检验当前填入的数字是否有冲突
        // 如果有冲突 就显示冲突位置
        checkAndShowConflictSetStatus(blockInd, pos, val, it, 1);
        // 记录操作
        historyAction.push({
            isDeleteOrInput: 1,// 是  填入数字(1) 或 删除(0)
            pos: pos,// 位置(x*3+y)
            blockInd: blockInd,// 第几块
            num: val// 如果是填入，填入的是几
        })
        haveCorrectInputNum.value++;
        // 判断填入 正确数字 数量
        if (gameOver) {
            // 通关
            // todo 显示弹窗
        }
    } else {
        haveCorrectInputNum.value--;
    }
})
// 删除填入数字
const clearInputNum = provide('clearInputNum', () => {
    // 判断当前选中位置是否为 可填空
    let x = posX.value;
    let y = posY.value;
    let pos = x * 3 + y;
    let tobj = arrList.value[selBlock.value][pos];
    // 可填 也可删
    if (!tobj.isQ) {
        tobj.num = '';
        // 记录操作
        historyAction.push({
            isDeleteOrInput: 0,// 是  填入数字(1) 或 删除(0)
            pos: pos,// 位置(x*3+y)
            blockInd: selBlock.value,// 第几块
            num: 0// 如果是填入，填入的是几
        })
    }
})
// 存放冲突位置 
let conflictPosArr = [];
const checkAndShowConflictSetStatus = (blockInd, pos, num, it, status) => {
    conflictPosArr.length = 0;
    let tx = pos / 3;
    let ty = pos % 3;
    let tblockInd = blockInd;
    let realTX = blockInd / 3 * 3 + tx;
    let realTY = blockInd % 3 * 3 + ty;
    // 遍历数值相同位置 是否有同行同列 方块
    numToPosMap[num].forEach({x, y, blockInd}, i => {
        //有冲突 就显示冲突
        if (num == arrList.value[blockInd][x * 3 + y]) {
            // x y tx ty 都是相对 每一块来说的 所以要换算
            let blockX = blockInd / 3, blockY = blockInd % 3;
            let realX = blockX * 3 + x, realY = blockY * 3 + y;
            if (realX == realTX || realY == realTY || tblockInd == blockInd) {
                it.status = status;
            }
        }
    });
}
// 重置答案
const resetFun = provide('resetFun', () => {
    // 遍历所有要填入位置 删除 数字
    needAnsPos.forEach(it => it.num = '');
})
// 退回上一步
const returnPreActionOrEndGame = provide('returnPreActionOrEndGame', () => {
    // 如果闯关成功 就结束游戏
    if (gameOver) {
        // todo：关闭弹窗 清除游戏数据
        return;
    }
    if (!historyAction.length) return;
    let actionObj = historyAction[historyAction.length - 1];
    historyAction.length -= 1;
    //   isDeleteOrInput: ,// 是  填入数字(1) 或 删除(0)
//   pos: ,// 位置(x*3+y)
//   blockInd: ,// 第几块
//   num:// 如果是填入，填入的是几
    let {pos, blockInd, num} = actionObj;
    // 撤退当前操作
    if (actionObj.isDeleteOrInput) {// 是插入数字
        // 删除当前位置数字
        arrList.value[blockInd][x * 3 + y].num = '';
        checkAndShowConflictSetStatus(blockInd, pos, num, arrList.value[blockInd][pos], 0);
    } else {// 是删除
        arrList.value[blockInd][pos].num = num;
        // 判断显示冲突
        checkAndShowConflictSetStatus(blockInd, pos, num, arrList.value[blockInd][pos], 1);
    }
})
</script>

<style scoped>
.tableView_box {
}

.item_box {
    display: flex;
    width: 100%;
}

.cellClass {
    /*margin: 10px;*/
    height: 100%;
}

</style>
